<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar :title="updateId==1?'添加档案':'编辑档案'" :autoBack="true">
		</up-navbar>
		<view class="mt-2 pl-2 pr-2">
			<up-form labelPosition="left" :model="userForm" :rules="rules" ref="form1" labelWidth="80">
				<view class="">
					<up-upload :fileList="avatarList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1" width="150" height="150">
						<view class="avatar-img flex-c j-c a-c">
							<text class="iconfont icon-shangchuantouxiang" />
							<text>上传头像</text>
							<view>
								<image src="@/static/images/home/camera.png" mode="" />
							</view>
						</view>
					</up-upload>
				</view>
				<view v-if="updateId==1" class="mt-2 mb-1 textarea">
					<up-textarea v-model="userForm.personalInfo"
						placeholder="粘贴出生信息自动识别，例如:1987年1月1日00:00；北京市东城区出生；男生" />
					<button>粘贴并识别</button>
				</view>
				<up-form-item label="昵称" prop="userForm.nickname" ref="item1">
					<up-input fontSize="28rpx" v-model="userForm.name" border="none" />
				</up-form-item>
				<up-form-item label="标签选择" prop="userForm.tag" @click="showTag = true; hideKeyboard()" ref="item1">
					<up-input v-model="userForm.tag" border="none" suffixIcon="arrow-right"
						suffixIconStyle="color: #BDBDBD" />
				</up-form-item>
				<up-form-item label="性别" prop="userForm.sex" ref="item1">
					<view class="flex-r">
						<view class="sex-radio flex-r" :style="userForm.sex==='男'?'borderColor:#FF9281':''"
							@click="userForm.sex = '男'">
							<text class="iconfont icon-nan mr-1" />
							男生
						</view>
						<view class="sex-radio flex-r ml-1" :style="userForm.sex==='女'?'borderColor:#FF9281':''"
							@click="userForm.sex = '女'">
							<text class="iconfont icon-nv mr-1" />
							女生
						</view>
					</view>
				</up-form-item>
				<up-divider />
				<up-form-item fontSize="28rpx" label="出生地点" prop="userForm.birthplace"
					@click="showPlace = true; hideKeyboard()" ref="item1">
					<up-input v-model="userForm.birthplace" border="none" suffixIcon="arrow-right"
						suffixIconStyle="color: #BDBDBD" />
				</up-form-item>
				<up-form-item label="出生时间" prop="userForm.birthDate" @click="showDate = true; hideKeyboard()"
					ref="item1">
					<up-input v-model="userForm.birthDate" border="none" suffixIcon="arrow-right"
						suffixIconStyle="color: #BDBDBD" />
				</up-form-item>
				<up-form-item label="时区" prop="userForm.birthTime" @click="showTime = true; hideKeyboard()" ref="item1">
					<up-input v-model="userForm.birthTime" border="none" suffixIcon="arrow-right"
						suffixIconStyle="color: #BDBDBD" />
				</up-form-item>
				<text class="time-tips">时区默认为中国时区东8区，大陆夏令时自动判断</text>
				<button class="save-btn mt-2">保存档案</button>
			</up-form>
			<!-- 标签 -->
			<up-picker :show="showTag" :columns="tagColumns" @confirm="getTag" @cancel="showTag = false" />
			<!-- 地点 -->
			<up-picker :show="showPlace" ref="uPickerRef" :columns="cityColumns" @change="changeHandler"
				@confirm="getBirthplace" @cancel="showPlace = false" />
			<!-- 日期 -->
			<up-datetime-picker :show="showDate" v-model="pickerData.birthDate" mode="date" @confirm="getBirthDate"
				@cancel="showDate = false" />
			<!-- 时间 -->
			<up-datetime-picker :show="showTime" v-model="pickerData.birthTime" mode="time" @confirm="getBirthTime"
				@cancel="showTime = false" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		county
	} from './CtiyData.js'
	import {
		formatDate
	} from '@/utils/util.js'
	// 传递title add edit
	// const emit = defineEmits(['createSuccess'])
	const props = defineProps({
		updateId: {
			type: String,
			default: '1'
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	// 表单数据
	const avatarList = ref([])
	// 使用 reactive 创建响应式状态  
	const now = new Date()
	const pickerData = reactive({
		birthDate: Date.now(),
		birthTime: now.toLocaleTimeString('en-US', {
			hour: '2-digit',
			minute: '2-digit'
		})
	})
	const userForm = reactive({
		nickname: '',
		personalInfo: '',
		sex: '',
		tag: '',
		birthplace: '',
		birthDate: '',
		birthTime: ''
	});
	const rules = reactive({
		'userInfo.name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		'userInfo.sex': {
			type: 'string',
			max: 1,
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change'],
		},
	})

	// 使用 ref 创建响应式引用  
	const formRef = ref(null);

	// 提交表单
	const submitForm = () => {
		console.log('表单数据:', form.value);
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
	};
	// 头像上传
	const afterRead = () => {}
	const deletePic = () => {}

	const tagColumns = reactive([
		[1, 2, 3]
	])
	// 选择标签
	const showTag = ref(false)
	const getTag = (val) => {
		showTag.value = false
		userForm.tag = val.value.join()
	}

	const cityColumns = reactive([])
	const columnData = reactive([]);
	const arrOne = [] //省(第一列数据)
	county.forEach(item => {
		arrOne.push(item.name)
	})
	const arrTwo = [] //市(第二列数据)
	county.forEach(item => {
		const list = item.children.map(ite => {
			return ite.name
		})
		arrTwo.push(list)
	})
	cityColumns[0] = arrOne
	cityColumns[1] = arrTwo[0]
	columnData.value = arrTwo
	const showPlace = ref(false)
	const getBirthplace = (val) => {
		userForm.birthplace = val.value.join()
		showPlace.value = false
	}

	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			index,
			picker
		} = e;

		if (columnIndex === 0) {
			// 模拟网络请求
			setTimeout(() => {
				uPickerRef.value.setColumnValues(1, columnData.value[index]);
			}, 1000);
		}
	};

	const showDate = ref(false)
	const getBirthDate = (val) => {
		userForm.birthDate = formatDate(val.value, 'yyyy-MM-dd')
		showDate.value = false
	}

	const showTime = ref(false)
	const getBirthTime = (val) => {
		userForm.birthTime = val.value
		showTime.value = false
	}

	const hideKeyboard = () => {
		uni.hideKeyboard(); // 调用 UniApp 的隐藏键盘方法
	};
</script>

<style lang="scss" scoped>
	.avatar-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #E8E8E8;
		position: relative;

		.iconfont {
			font-size: 40rpx;
			color: #BDBDBD;
		}

		text {
			font-size: 20rpx;
			color: #A6A6A6;
			margin-top: 8rpx;
		}

		view {
			position: absolute;
			right: -6rpx;
			bottom: -6rpx;
			width: 40rpx;
			line-height: 40rpx;
			background-color: #000;
			border-radius: 50%;
			text-align: center;

			image {
				width: 22rpx;
				height: 22rpx;
			}
		}
	}

	.textarea {
		position: relative;
		border: 1px solid #f9f9f9;

		button {
			position: absolute;
			bottom: 16rpx;
			right: 20rpx;
			font-size: 12px;
			text-align: center;
			color: #531F14;
			background: #FED523;
			border-radius: 8rpx;
		}
	}

	.sex-radio {
		color: #393939;
		padding: 16rpx 40rpx;
		border-radius: 40rpx;
		border: 1px solid #DCDCDC;

		.icon-nv {
			color: #DF0063;
		}
	}

	.time-tips {
		font-size: 22rpx;
		color: #A6A6A6;
		line-height: 32rpx;
	}

	.save-btn {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #FF9281;
		border-radius: 46rpx;
	}

	::v-deep .u-upload__wrap {
		justify-content: center;
	}

	::v-deep .uni-input-input,
	::v-deep .u-input__content {
		background-color: #F9F9F9;
	}

	::v-deep .u-input__content {
		padding: 0 20rpx;
		border-radius: 16rpx;
	}

	// ::v-deep .u-input__content__field-wrapper__field {
	// 	height: 40px;
	// }
	::v-deep .u-input__content {
		height: 70rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		color: #797979;
	}

	::v-deep .u-textarea {
		background-color: #F9F9F9;
		border: none;
	}

	::v-deep .u-datetime-picker__has-input .input-cover,
	::v-deep .u-border {
		border: none;
		background-color: #F9F9F9;
	}
</style>